

<style>
    .taskOrder-content {
        margin-bottom: 0px;
        background-color: #DEE9F5;
        font-size: 12px;
        min-height: 435px;
    }
    .taskOrder-content .taskOrder-card {
        margin-bottom: 0px;
        background-color: #DEE9F5;
        border-bottom: 1px solid #D2D2D2;
        overflow-y: auto;
    }
    .taskOrder-card .blockTitle {
        color: #296ECA;
        padding-left: 35px;
    }
    .taskOrder-card .blockTitle .title-icon {
        width: 18px;
        height: 18px;
        line-height: 12px;
        left: 15px;
        color: #5DC5DC;
    }
    .taskOrder-card .title-more {
        float: right;
        cursor: pointer;
    }
    .taskOrder-card .table-content {
        width: 100%;
        height: 368px;
    }
    .taskOrder-card .task-item {
        display: inline-block;
        width: 158px;
        height: 87px;
        background-color: #EDF4FA;
        box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.5);
    }
    .taskOrder-card .left-icon {
        float: left;
        width: 56px;
        height: 100%;
        background: url('../../../dist/style/res/index/task.png') no-repeat center center;
        background-size: 35px 44px;
    }
    .taskOrder-card .right-content {
        float: left;
        width: 100px;
        height: 100%;
    }
    .taskOrder-card .right-content .title {
        height: 25px;
        width: 100%;
        line-height: 25px;
        text-align: left;
        font-size: 12px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .taskOrder-card .right-content .form {
        width: 100%;
        height: 60px;
    }
    .taskOrder-card .right-content .form-title {
        height: 18px;
        line-height: 18px;
    }
    .taskOrder-card .right-content .form-content {
        height: 42px;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .taskOrder-card .right-content .form-content p {
        height: 18px;
        line-height: 18px;
    }
    .taskOrder-card .c-go-task {
        line-height: 85px;
        text-align: center;
    }
    .taskOrder-card .self-table {
        width: 100%;
    }
    .taskOrder-card .self-table .div-thead {
        width: 100%;
        height: 30px;
    }
    .taskOrder-card .self-table .div-thead .div-col {
        float: left;
        height: 30px;
        background-color: #D6E7F3;
        text-align: center;
    }
    .taskOrder-card .self-table #i-task-data-c {
        background-color: #DAEBF5;
    }
    .taskOrder-card .self-table #i-task-data-c .tbody-div div{
        float: left;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }
    .taskOrder-card .self-table #i-task-data-c .name-td {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .taskOrder-card .self-table .download-div {
        cursor: pointer;
        width: 50px;
        background: url('../../../dist/style/res/index/download.png') no-repeat center center;
        background-size: 24px 24px;
    }
    .top-red {
        color: red;
        font-size: 16px;
    }
</style>
<div class="taskOrder-content">
    <div class="layui-card taskOrder-card">
        <div class="layui-card-header blockTitle">
            <i class="layui-icon layui-icon-form title-icon"></i>
            数据应用排行
            <span class="title-more">MORE</span>
        </div>
        <div class="layui-card-body">
            <div class="table-content">
                <div class="self-table">
                    <div class="div-thead">
                        <div class="div-col" style="width: 50px;">排行</div>
                        <div class="div-col" style="width: 140px;">数据清单</div>
                        <div class="div-col" style="width: 80px;">浏览量</div>
                        <div class="div-col" style="width: 50px;">下载</div>
                    </div>
                    <div id="i-task-data-c">
                    </div>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="taskOrderEmergengcyTpl">
    {{#  if(!!d.tasks && d.tasks.length && d.tasks.length > 0){
        $.each(d.tasks, function(index, item) {
            var c = index < 3 ? 'top-red' : '';
    }}
        <div class="tbody-div" style="width: 100%;">
            <div class="{{c}}" style="width: 50px;text-align:center;">{{'TOP'+(index+1)}}</div>
            <div class="name-td" style="width: 140px;text-align:center;" lay-tips="{{item.taskname}}">{{item.taskname}}</div>
            <div style="width: 80px;text-align:center;">{{item.numbers}}</div>
            <div class="download-div"></div>
        </div>
    {{#  
        })
            }
    }}
</script>
<script>
layui.use(['admin'], function(){
    var $ = layui.$,
    admin = layui.admin,
    router = layui.router(),
    laytpl = layui.laytpl;


    var tasks = [
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'},
        {'taskname': '2018年气温数据收集', 'numbers': '4396'}
    ];

    var getTpl = taskOrderEmergengcyTpl.innerHTML;
    var viewHtml = document.getElementById('i-task-data-c');
    laytpl(getTpl).render({tasks: tasks}, function(html){
        viewHtml.innerHTML = html;
    });

});
</script>